<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
</head>

<body>
    <template type="text/x-template" id="item-template">
        <li>
            <span v-on:click="toggle()" class="name_span">{{item.name}}</span>
            <ul class="level1" v-show="isOpen" v-if="isFolder">
                <tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
            </ul>
        </li>
    </template>
    <!-- the demo root element -->
    <div id="app" v-cloak>
        <ul class="mytree">
            <tree-item class="item" :item="treeData"></tree-item>
        </ul>
    </div>
</body>
<script type="text/javascript" src="./script/vue.js"></script>
<script>
    // define the tree-item component
    Vue.component('tree-item', {
            template: '#item-template',
            props: {
                item: {}
            },
            data: function() {
                return {
                    isOpen: false
                }
            },
            computed: {
                isFolder: function() {
                    return this.item.children &&
                        this.item.children.length
                }
            },
            methods: {
                toggle: function() {
                    if (this.isFolder) {
                        this.isOpen = !this.isOpen
                    }
                }
            }
        })
        // boot up the demo
    var app = new Vue({
        el: '#app',
        data: {
            treeData: {
                name: 'My Tree',
                level: 1,
                children: [{
                    name: 'hello',
                    level: 2,
                }, {
                    name: 'wat',
                    level: 2,
                }, {
                    name: 'child folder',
                    level: 2,
                    children: [{
                        name: 'child folder',
                        level: 3,
                        children: [{
                            name: 'hello',
                            level: 4,
                        }, {
                            name: 'wat',
                            level: 4,
                        }, {
                            name: 'child folder',
                            level: 4,
                            children: [{
                                name: 'hello',
                                level: 5,
                            }, {
                                name: 'wat',
                                level: 5,
                            }]
                        }]
                    }, {
                        name: 'hello',
                        level: 3,
                    }, {
                        name: 'wat',
                        level: 3,
                    }]
                }]
            }
        },
        methods: {}
    })
</script>

</html>
